<template>

  <a-modal v-model:visible="LAYER.visible" :title="LAYER.title" :width="600" :ok-text="LAYER.okText"
           :align-center="LAYER.alignCenter" :top="LAYER.top"
           :footer="false"
           :closable="LAYER.closable" :unmount-on-close="LAYER.unmountOnClose"
           :mask-closable="LAYER.maskClosable" :esc-to-close="LAYER.escToClose" :ok-loading="LAYER.okLoading"
           @cancel="onClose()">
    <div id="playerDom1"></div>

  </a-modal>

</template>

<script lang="ts" setup>
import {ref} from 'vue'
import {LocalModal} from '@/libs/core';

const emit = defineEmits(['close']);
const service = new LocalModal(emit).setMD('工单视频');
const {LAYER} = service;
const show = ref(false)

const props = defineProps({
  record: {type: Object, required: true}
});
const formRef = ref(null)

var player = null

const onLoadUlr = async () => {
  show.value = true
  player = await new Aliplayer({
    id: 'playerDom1',
    source: props.record.video,
    // source: "https://oss2.wutunbang.com/other/20240228/0886d0d533f8e0f2.mp4",
    isLive: false,
  });


}

const onClose = async () => {
  await player.dispose()
  service.onCancel('NONE')
}

onLoadUlr()

</script>

<style scoped lang="less">
#playerDom1 {
  background-color: #000000;
  width: 100%;
  height: 500px;
}

:deep(.arco-modal-body) {
  padding-top: 0;
}

</style>
